<template>
    <div class="container">
        <h1>创作申请</h1>
        <div class="form-group">
            <label for="title">标题：</label>
            <input type="text" id="title" v-model="title" placeholder="标题" class="form-control" />
        </div>
        <div class="form-group">
            <label for="content">文字描述：</label>
            <textarea id="content" type="textarea" v-model="content" cols="100" rows="5" placeholder="内容"
                class="form-control"></textarea>
        </div>
        <div class="form-group">
            <label for="file">图片/视频:</label>
            <input type="file" id="file" ref="photo" @change="upload" class="form-control-file" />
        </div>
        <div class="media-gallery">
            <div class="media-container" v-for="(fileName, index) in fileNames" :key="index">
                <img v-if="isImage(fileName)" :src="fileName" height="200px" class="media-item" />
                <video v-else-if="isVideo(fileName)" :src="fileName" controls height="200px" class="media-item"></video>
                <span class="delete-btn" @click="delImg(fileName)">X</span>
            </div>
        </div>
        <div class="button-group">
            <button @click="submit" class="btn btn-primary">提交</button>
            <button @click="cancel" class="btn btn-secondary">取消</button>
        </div>
    </div>
</template>
<script>
import { ref } from 'vue';
import axios from '../axios/index.js'
import { useRouter } from 'vue-router';
export default {
    setup() {
        const title = ref("");
        const content = ref("");
        const vedio_url = ref("");
        const fileNames = ref([]);
        const router = useRouter();
        const photo = ref("");
        function upload() {
            let formData = new FormData();
            formData.append('photo', photo.value.files[0]);
            axios.post('/oss/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
                .then(res => {
                    alert("上传成功");
                    fileNames.value.push(res.data.data);
                    //this.link.imgurl = res.data.data;
                })
        }
        async function submit() {
            // 弹出确认提示框
            const confirmed = confirm("确定要提交吗？");
            if (!confirmed) {
                return;
            }
            // 获取用户信息
            const userStr = sessionStorage.getItem("user");
            const userData = JSON.parse(userStr); // 解析为对象
            const user_id = userData.user.user_id;
            let result = await axios.post("/submit/add", { user_id: user_id, title: title.value, content: content.value, fileNames: fileNames.value })
            let r = result.data;
            alert(r.msg);
        }
        function isImage(fileName) {
            return /\.(jpg|jpeg|png)$/i.test(fileName);
        }

        function isVideo(fileName) {
            return /\.(mp4|avi)$/i.test(fileName);
        }
        async function delImg(fileName) {
            const result = await axios.delete('/oss/del/' + fileName.substring(fileName.lastIndexOf('/') + 1))
            fileNames.value = fileNames.value.filter(name => name !== fileName);
        }
        function cancel() {
            router.push("/submitCenter");
        }
        return { title, content, vedio_url, fileNames, upload, submit, photo, delImg, isImage, isVideo, cancel }
    }
}
</script>

<style>
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
    color: #333;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

.form-control {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-control-file {
    display: block;
    margin-top: 5px;
}

.media-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.media-container {
    position: relative;
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.media-item {
    display: block;
    width: 200px;
    height: auto;
}

.delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    color: white;
    background-color: red;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.button-group {
    text-align: center;
    margin-top: 20px;
}

.btn {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 5px;
}

.btn-primary {
    background-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-secondary {
    background-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #545b62;
}
</style>